<template>
  <div v-for="item in menuList" :key="item.id">
    <div
      @mouseenter="() => enterItem(item)"
      @mouseleave="() => leaveItem(item)"
      :class="
        $cn('relative text-center px-4 py-2', {
          'py-4 px-10': level == 1,
        })
      "
    >
      <MyLink
        to="/"
        :class="
          $cn('hover:text-theme  ', {
            ' text-theme': item.ids.includes(select) || item.showChild,
          })
        "
        >{{ item.name }}</MyLink
      >
      <div
        v-if="item.children && item.children.length > 0"
        :class="
          $cn('absolute whitespace-nowrap hidden  bg-white rounded-lg shadow-lg', {
            'top-0 left-[100%]': level > 1,
            '-translate-x-1/2 left-1/2 translate-y-4': level == 1,
            block: item.showChild,
            ani_bottom: item.showChild && level > 1,
            active_first: item.showChild && level == 1,
          })
        "
      >
        <Arrow
          v-if="level == 1"
          class="-top-[10px] -left-[10px] -translate-x-1/2"
        ></Arrow>
        <WebNavItem
          :select="select"
          :level="level + 1"
          :nav-list="item.children"
        ></WebNavItem>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "WebNavItem",
};
</script>
<script setup lang="ts">
import { ref } from "vue";
const props = defineProps({
  navList: {
    type: Array<any>,
    required: true,
  },
  select: String,
  level: {
    type: Number,
    default: 1,
  },
});
const menuList = toRef(props.navList);
const enterItem = (item: any) => {
  if (item.children && item.children.length > 0) {
    item.showChild = true;
  }
};
const leaveItem = (item: any) => {
  if (item.children && item.children.length > 0) {
    item.showChild = false;
  }
};
</script>
<style lang="scss" scoped>
.ani_bottom {
  animation: aniTop 0.5s ease-in-out;
  @keyframes aniTop {
    from {
      opacity: 0;
      transform: translateY(50%);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
.nav_is_active {
  color: blue;
}
.active_first {
  animation: aniFirst 0.3s ease-in-out;
  @keyframes aniFirst {
    0% {
      transform: translateX(-50%) translateY(40px);
    }
    100% {
    }
  }
}
</style>
